var charts = {
    barinit(_this) {
        echarts.dispose(document.getElementById('barshow'))
        _this.$barcharts = echarts.init(document.getElementById('barshow'))
        _this.$barcharts.setOption({
            dataset: { ...chartsdata.bar.dataset },
            grid: { containLabel: true, left: 10, top: 10, bottom: 35, right: 70 },
            xAxis: { name: 'amount', axisLabel: { textStyle: { color: 'white' } }, nameTextStyle: { color: 'white' } },
            yAxis: { type: 'category', axisLabel: { textStyle: { color: 'white' } } },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                },
                textStyle: {
                    color: 'white'
                }
            },
            series: [...chartsdata.bar.series]
        })
    },
    pieinit(_this) {
        echarts.dispose(document.getElementById('pieshow'))
        _this.$piecharts = echarts.init(document.getElementById('pieshow'))
        _this.$piecharts.setOption({
            // title: {
            //     text: 'Referer of a Website',
            //     subtext: 'Fake Data',
            //     left: 'center'
            // },
            grid: { containLabel: true },
            tooltip: {
                trigger: 'item',
                color: 'chite'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left'
            // },
            series: [...chartsdata.pie.series]
        })
    }
}